import 'scss/index.scss'
import 'scss/flex.scss'
import 'scss/footer.scss'
import 'scss/header.scss'
import React from 'react'
import ReactDom from 'react-dom'
import initHandle from 'core/init'

import {
    Router,
    Route,
    hashHistory,
    Link,
    browserHistory,
    IndexRoute
} from 'react-router'
import { panelPop } from 'views/panelPop'
import City from 'views/map/city'
import MapList from 'views/map/maplist'
import Dungeon from 'views/map/dungeon'

initHandle.initPlayer()

const App = React.createClass({
    render() {
        let btnNode;
        return (
            <div className='flex d-column' id='app'>
                <Header />
                <div className='flex-g-1'>
                    <div id='index'>
                        {this.props.children}
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
});

const Header = React.createClass({
    render() {
        return (
            <header className="flex wrap">
                <div className='item flex-col-1'>春</div>
                <div className='item flex-col-2'>1日</div>
                <div className='item flex-col-2'>1时</div>
                <div className='item flex-g-1 text-right'>下雨</div>
            </header>
        )
    }
});

const Footer = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },
    onClick() {
        var path = '/login';
        this.context.router.push(path);
    },
    openPanel(name) {
        panelPop.openPanel(name)
    },
    savePlayer() {
        window.player.save()
    },
    getPlayerInfo() {
        console.log(window.player)
    },
    render() {
        return (
            <footer className="flex wrap">
                <button>制作</button>
                <button>强化</button>
                <button>修练</button>
                <button onClick={this.getPlayerInfo}>人物</button>
                <button onClick={this.openPanel.bind(this, 'bag')}>背包</button>
                <button onClick={this.openPanel.bind(this, 'task')}>任务</button>
                <button onClick={this.savePlayer}>保存</button>
            </footer>
        )
    }
});

ReactDom.render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <Route path="/city" component={City} />
            <Route path="/maplist" component={MapList} />
            <Route path="/dungeon/:id" component={Dungeon} />
        </Route>
    </Router>
), document.getElementById('main'));
